<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue'
import { usePostListStore } from '@/stores/post';
import PostCom from '@/components/PostCom.vue';

const postList = usePostListStore()
const route = useRoute()
const router = useRouter()
const posts = ref(postList.getTopicPost(route.query.topic))

function tofind() {
    router.push('/find')
}

function toPost() {
    router.push('/post')
}

</script>

<template>
    <div class="main">
        <van-nav-bar title="话题详情" left-text="返回" left-arrow @click-left="tofind" />
        <div class="content">
            <div class="top">
                <h2># {{ route.query.topic }}</h2>
                <div class="center">
                    <span>1人参与</span>
                    <span>1次浏览</span>
                    <span>{{ posts.length }}个内容</span>
                </div>
            </div>
            <PostCom :topic="route.query.topic"></PostCom>
            <div class="button" @click="toPost">参与话题</div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.top {
    h2 {
        color: green;
    }

    .center {
        display: flex;
        justify-content: space-around;
    }
}

.button {
    position: fixed;
    width: 275px;
    height: 40px;
    background-color: aqua;
    font-size: 20px;
    bottom: 5px;
    right: 50px;
    text-align: center;
    line-height: 40px;
    border-radius: 25px;
}
</style>